<template>
  <div class="dashboard animate__animated animate__fast animate__fadeInRightBig">
    <div class="header flex">
      <span class="introduce">欢迎回来 昵称</span>
      <div class="header__footer flex">
        <span class="header__footer__title">仪表盘</span>
        <div class="header__footer__date">
          <span class="iconfont icon-rili"></span>
          <span class="start_time">2021年11月16日</span>-
          <span class="end_time">2021年12月16日</span>
        </div>
      </div>
    </div>
    <div class="dashboard__main flex">
      <!-- 工作量 -->
      <div class="workload">
        <ComponentHead title="工作量" right-title="查看全部" />
        <div class="userInfos">
          <UserInfo v-for="item in userInfos" :key="item.id" :item="item" />
        </div>
      </div>
      <!-- 最近事件 -->
      <div class="recent_events">
        <ComponentHead title="最近事件" right-title="查看全部" @right="showEvent" />
        <RecentEvent v-for="item in recentEvents" :key="item.id" :item="item" />
      </div>
      <!-- 项目 -->
      <div class="project1">
        <ComponentHead title="项目" right-title="查看全部" />
        <Project v-for="item in project" :key="item.id" :item="item" />
      </div>
      <!-- 项目日志 -->
      <div class="project_log">
        <ComponentHead title="项目日志" />
        <ProjectLog :item="item" v-for="item in  projectLogs" :key="item.id" />
        <div class="project_log__footer">
          <span>查看更多</span>
          <span class="iconfont icon-xiala"></span>
        </div>
      </div>
    </div>
    <!-- 全部事件 -->
    <EventAll v-model:isshow="isEvent" />

  </div>
</template>

<script setup lang="ts">
import ComponentHead from '@/components/componenthead/index.vue';
import UserInfo from '@/components/userInfo/index.vue';
import RecentEvent from '@/components/recentevent/index.vue';
import Project from '@/components/project/index.vue';
import ProjectLog from '@/components/projectlog/index.vue';
import EventAll from './eventAll.vue';
import { IUserInfo, IEvent } from '@/types/user';
import { ref, onMounted } from 'vue';
import { getStaffListApi } from '@/api/userApi';
import { recentEventApi } from '@/api/eventApi';
import { getNotProject } from '@/api/projectApi';
import { IProject, IProjectLog } from '@/types/project';
import { concurrencyRequest } from '@/utils/request';

// 员工数量
const userInfos = ref<IUserInfo[]>([])

// 最近事件
const recentEvents = ref<IEvent[]>(
  [{
    id: "1",
    title: "新部门介绍,标题文字显例,最多两行折行显示",
    day: "今天",
    time: "下午5:00",
    duration: "2h",
    isRising: true,
  }, {
    id: "2",
    title: "王安娜的生日",
    day: "今天",
    time: "下午6:00",
    duration: "1h 30m",
    isRising: false,
    color: "#91929E"
  }, {
    id: "3",
    title: "雷欧娜的生日",
    day: "明天",
    time: "下午2:00",
    duration: "1h 30m",
    isRising: false,
    color: "#91929E"
  }
  ])

// 项目日记
const projectLogs = ref<IProjectLog[]>(
  [
    {
      id: "1",
      user: {
        id: "1",
        username: "张伟成",
        duties: "用户界面/交互设计师",
        avatar: "https://img.zcool.cn/community/01e636554beaba000001bf72eb1ba4.jpg@2o.jpg",
        level: "中级",
        schedule: "20%"
      },
      logs: [
        {
          icon: "icon-tishi1",
          name: "将思维导图任务的状态更新为进行时"
        },
        {
          icon: "icon-tishi1",
          name: "附加到任务的文件"
        },
      ]
    },
    {
      id: "1",
      user: {
        id: "1",
        username: "张伟成",
        duties: "用户界面/交互设计师",
        avatar: "https://img.zcool.cn/community/01e636554beaba000001bf72eb1ba4.jpg@2o.jpg",
        level: "中级",
        schedule: "20%"
      },
      logs: [
        {
          icon: "icon-tishi1",
          name: "将思维导图任务的状态更新为进行时"
        },

      ]
    }
  ])

// 项目
const project = ref<IProject[]>([]);


onMounted(() => {
  concurrencyRequest([
    () => getStaffListApi("奇迹"),
    () => recentEventApi(),
    () => getNotProject()]).then(res => {
      // @ts-ignore
      userInfos.value = res[0]
      // @ts-ignore
      recentEvents.value = res[1]
      // @ts-ignore
      project.value = res[2]
      console.log(res);

    })



})

// 显示全部事件
function showEvent() {
  isEvent.value = 1;
}

// 显示全部事件
const isEvent = ref<number>(0)




</script>

<style scoped lang="scss">
.dashboard {
  position: relative;
  overflow: hidden;
  // background-color: red;

  .header {
    margin: 30px 0 30px;
    flex-direction: column;
    text-align: left;
    gap: 10px;

    .introduce {
      color: rgb(114, 114, 114);
      font-size: 14px;
    }

    &__footer {
      align-items: center;
      justify-content: space-between;

      &__title {
        font-size: 25px;
      }

      &__date {
        background-color: #E6EDF5;
        padding: 8px 15px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
      }
    }
  }

  &__main {
    position: relative;
    flex-wrap: wrap;
    gap: 15px;

    .workload {
      background-color: white;
      width: calc(70% - 20px);
      box-sizing: border-box;
      border-radius: 20px;
      padding-top: 10px;

      .userInfos {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        flex-wrap: wrap;
      }
    }

    .recent_events {
      background-color: white;
      width: 30%;
      border-radius: 20px;
      padding-top: 10px;
    }

    .project1 {
      // background-color: white;
      width: calc(70% - 20px);
      box-sizing: border-box;

      :deep(.card) {
        background-color: transparent;
      }
    }

    .project_log {
      background-color: white;
      width: 30%;
      border-radius: 20px;
      padding-top: 20px;
      position: relative;

      &__footer {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: #3F8CFF;
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 25px;
          color: #3F8CFF;

        }
      }
    }
  }


}
</style>